<template>
	<view>
		<!-- 自定义导航 -->
		<view class="returnBox">
			<return-text></return-text>
		</view>
		<!-- 加载特效 -->
		<view v-if="initState" class="loadingbox">
			<van-loading class="loading" size="24px">加载中...</van-loading>
		</view>
		<!-- 内容 -->
		<view v-else class="body">
			<!-- 输入框 -->
			<view class="box_input">
				<view class="box_input_input">
					<input cursor-spacing="10px" type="text" v-model="textValue" @blur="blur" :focus="showInput"
						:placeholder="mess" />
				</view>
				<!-- 按钮 -->
				<view class="box_input_button">
					<!-- 我要购买按钮 -->
					<view v-if="textValue === ''" @click="upReplyImg" class="box_input_button_txt">我要购买</view>
					<!-- 发送按钮 -->
					<view v-else class="box_input_button_text" @click="sendOut">发送</view>
				</view>
			</view>

			<!-- 顶部发布者信息 -->
			<view class="user_title">
				<view class="user_title_box">
					<!-- 头像 -->
					<view class="user_title_img">
						<image :src="commodityContent.avatar" mode=""></image>
					</view>
					<!-- id和发布时间 -->
					<view class="user_title_text">
						<view class="user_title_name">
							{{commodityContent.userName}}
						</view>
						<view class="user_title_time">
							{{ commodityContent.createTime|formatDate( 'MM月dd日') }}发布
						</view>
					</view>

				</view>
				<view class="user_title_box" v-if="objUserId !== commodityContent.userId">
					<!-- 关注 -->
					<view v-if="isFans" class=".user_title_followTwo" @click="userFollow"> 已关注 </view>
					<view v-else class="user_title_follow" @click="userFollow"> +关注 </view>
				</view>
			</view>

			<!-- 图片展示 -->
			<swiper circular="true" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500"
				indicator-active-color="#3FD3D1" indicator-color="#ffffff">
				<van-transition name="fade">
					<swiper-item v-for="(item,idx) in commodityImage" :key="idx">
						<image class="swiper_image" :src="item" mode="aspectFill"></image>
					</swiper-item>
				</van-transition>
			</swiper>

			<!-- 文字 -->
			<view class="text_box">
				<view class="text_box_title">
					{{commodityContent.goodsName}}
				</view>
				<view class="text_box_content">
					{{commodityContent.goodsDescribe}}
				</view>
				<view class="text_box_price">
					<view class="text_box_price_box">
						<view class="text_box_price_label">包邮</view>
						<view class="text_box_price_label">校内</view>
					</view>
					<view class="text_price">￥ {{commodityContent.goodsPrice}}</view>
				</view>
			</view>

			<!-- 评论区 -->
			<view class="reply">
				<!-- 评论数量 -->
				<!-- <view @click="huoqu" class="reply_title">评论（{{articleContent.article.commentNum}}条）</view> -->
				<view v-if="replyContent.length == 0">
					<van-empty description="快来抢沙发吧~" />
				</view>
				<view v-for="(item,idx) in replyContent" :key="item.commentId">
					<!-- 主评论 -->
					<view class="reply_data">
						<!-- 左侧头像 -->
						<view class="reply_data_head">
							<image :src="item.avatar"></image>
						</view>
						<!-- 右侧 -->
						<view class="right_box">
							<!-- 右侧 昵称+点赞-->
							<view class="reply_data_id">
								<!-- ID和粉丝数量 -->
								<view class="reply_data_name">
									<view class="reply_data_name_text">
										{{item.name}}
										<view v-if="objUserId == commodityContent.userId" class="message"> 卖家
										</view>
									</view>
								</view>
								<!-- +点赞 -->
								<view class="fabulous" @click="pldianzan(item.commentId,idx,item)">
									<image v-if="item.status" src="../../static/message-icon/dianzan.png"
										mode="widthFix"></image>
									<image v-else src="../../static/message-icon/Nolink.png" mode="widthFix"></image>
									<text>{{item.likeNum}}</text>
								</view>

							</view>
							<!-- 内容 -->
							<view @longtap="onLongPress(item.commentId)"
								@click="replyComments(item.commentId,item.name,idx)">
								<view v-if="item.link == null " @click="send" class="reply_text">
									{{item.content}}
								</view>
								<view v-else>
									<image :src="item.link" mode="widthFix"></image>
								</view>
								<view class="reply_text_time">
									<text v-if="parseInt((timeatamp-item.createTime)/1000/60)<1"> 刚刚</text>
									<text
										v-if="parseInt((timeatamp-item.createTime)/1000/60)>=1 && parseInt((timeatamp-item.createTime)/1000/60)<60">
										{{ parseInt((timeatamp-item.createTime)/1000/60) }}分钟前回复</text>
									<text
										v-if="parseInt((timeatamp-item.createTime)/1000/60)>=60 && parseInt((timeatamp-item.createTime)/1000/3600)<24">
										{{ parseInt((timeatamp-item.createTime)/1000/3600) }}小时前回复</text>
									<text v-if="parseInt((timeatamp-item.createTime)/1000/3600)>=24">
										{{ parseInt((timeatamp-item.createTime)/1000/3600/24) }}天前回复</text>
									<text v-if="parseInt((timeatamp-item.createTime)/1000/3600/24)>1">
										{{ item.create||formatDate( 'MM月dd日') }}发布</text>
									<text>回复</text>
								</view>
							</view>

						</view>

					</view>

					<view v-if=" item.commentsNum !==0 && !panduan(idx)">
						<!-- 二级评论 -->
						<view class="reply_data data_chi" v-for="(item2,cidx) in cliCommentsListen[idx]"
							:key="item2.commentId">
							<!-- 左侧头像 -->
							<view class="reply_data_head">
								<image :src="item2.avatar"></image>
							</view>
							<!-- 右侧 -->
							<view class="right_box">
								<!-- 右侧 昵称+点赞-->
								<view class="reply_data_id">
									<!-- ID和粉丝数量 -->
									<view class="reply_data_name">
										<view class="">
											{{item2.name}}
										</view>
									</view>
									<!-- +点赞 -->
									<view class="fabulous" @click="pldianzanb(item2.commentId,idx,cidx,item.commentId)">
										<image v-if="item2.status" src="../../static/message-icon/dianzan.png"
											mode="widthFix">
										</image>
										<image v-else src="../../static/message-icon/Nolink.png" mode="widthFix">
										</image>
										<text>{{item2.likeNum}}</text>
									</view>
								</view>
								<!-- 内容 -->
								<view @click="replyCommentsChi(item2.commentId,item2.name,item.idx)"
									@longtap="onLongPress(item2.commentId)" class="reply_text">
									<text>回复</text> <text class="reply_text_over">{{item2.wasRepliedName}}</text>
									<text v-if="item2.link == null ">
										：{{item2.content}}
									</text>
									<view v-else>
										<image :src="item2.link" mode="widthFix"></image>
									</view>
									<view class="reply_text_time">
										<text v-if="parseInt((timeatamp-item2.createTime)/1000/60)<1"> 刚刚</text>
										<text
											v-if="parseInt((timeatamp-item2.createTime)/1000/60)>=1 && parseInt((timeatamp-item2.createTime)/1000/60)<60">
											{{ parseInt((timeatamp-item2.createTime)/1000/60) }}分钟前回复</text>
										<text
											v-if="parseInt((timeatamp-item2.createTime)/1000/60)>=60 && parseInt((timeatamp-item2.createTime)/1000/3600)<24">
											{{ parseInt((timeatamp-item2.createTime)/1000/3600) }}小时前回复</text>
										<text v-if="parseInt((timeatamp-item2.createTime)/1000/3600)>=24">
											{{ parseInt((timeatamp-item2.createTime)/1000/3600/24) }}天前回复</text>
										<text v-if="parseInt((timeatamp-item2.createTime)/1000/3600/24)>1">
											{{ item.create||formatDate( 'MM月dd日') }}发布</text>
										<text>回复</text>
									</view>
								</view>

							</view>

						</view>
					</view>

					<view
						v-if="item.commentsNum !== 0 && (isfalse[idx]===undefined||isfalse[idx]===null ? true : false)"
						@click="openReplyContent(item.commentId,idx)" class="reply_hidden">
						—— 点击展开{{item.commentsNum}}条评论
						<image src="../../static/message-icon/open.png" mode=""></image>
					</view>


				</view>

				<view class="dibu">
					已全部加载
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		formatDate
	} from '../../data/data.js'
	export default {
		props: {
			id: {
				type: String
			}
		},
		data() {
			return {
				// 进入页面
				initState: true,
				showInput: false,
				// 输入框信息
				textValue: '',
				// 商品信息
				commodityContent: {},
				// 商品图片
				commodityImage: [],
				// 商品发布时间
				goodsTime: "",
				// 一级评论
				replyContent: [],
				// 二级
				cliCommentsListen: [],
				// 是否关注
				isFans: '',
				// 评论框显示文本
				mess: '留言咨询卖家吧~',
				// 判断评论层级
				isAct: 0,
				// 评论id
				commentId: '',
				// 折叠的子评论
				isfalse: [],
				// 是否展开状态
				isOpen: [],
				// 访问当前页面的用户id
				objUserId: '',
				// 页面当前时间戳
				timeatamp: '',
				page:[]

			}
		},
		created() {
			this.fansStyle()
			// 拿到用户信息
			try {
				const value = uni.getStorageSync('userObj');
				if (value) {
					this.objUserId = value.userId
				}
			} catch (e) {}
			// 拿到当前时间
			let time = Date.now()
			this.timeatamp = time
			console.log("当前时间戳" + this.timeatamp)
		},
		onLoad() {
			this.queryIntactGoods()
			this.queryReplyContent()

		},
		filters: {
			formatDate(time, fmt) {
				return formatDate(time, fmt)
			},
		},
		methods: {
			// 获取文章内容
			async queryIntactGoods() {
				const {
					data: res
				} = await uni.$http.get(`//ym_server/IntactGoods?id=${this.id}`)
				// 内容
				this.commodityContent = res.data.list[0]
				// 图片
				this.commodityImage = this.commodityContent.goodsImage.split(';')
				setTimeout(() => {
					this.initState = false
				}, 600)
			},
			// 查询关注状态
			async fansStyle() {
				let uid = this.commodityContent.userId
				const {
					data: res
				} = await uni.$http.get(`//ym_server/fans/getOneFans?id=${uid}`)
				console.log(res)
				this.isFans = res.data.status
				console.log('当前关注状态' + this.isFans)
			},
			// 关注
			userFollow() {
				let uid = this.commodityContent.userId
				uni.$http.post(`//ym_server/fans/addFollow?id=${uid}`).then((res) => {
					console.log(res)
					this.fansStyle()
				})

			},
			// 获取评论 一级
			async queryReplyContent() {
				const {
					data: res
				} = await uni.$http.get(`//ym_server/comments/category?id=${this.id}&page=1`)
				this.replyContent = res.data.list.list

			},
			// 展开评论 点击获取二级评论
			async openReplyContent(itemId, idx) {
				console.log('当前评论id' + itemId)
				let pageNum = 0;
				if (this.page[idx] != undefined) {
					pageNum = this.page[idx]
				}
				console.log("this.page[idx]: " + this.page[idx])
				pageNum++
				const {
					data: res
				} = await uni.$http.get(
					`//ym_server/comments?goodsId=${this.id}&id=${itemId}&page=${pageNum}`)
				console.log(res)
				if (this.page[idx] != res.data.list.pageNum) {
					if (this.cliCommentsListen[idx] !== undefined) {

						Array.prototype.push.apply(this.cliCommentsListen[idx], res.data.list.list)

					} else {
						this.cliCommentsListen[idx] = res.data.list.list
					}
					this.isOpen.push(idx)
					this.page[idx] = res.data.list.pageNum

				}
				// console.log("this.page: "+this.page)
				// console.log(res.data.list.pages)
				if (this.page[idx] == res.data.list.pages) {
					// console.log("aa")
					this.isfalse[idx] = false
				}

			},
			panduan(id) {
				let flag = this.isOpen.indexOf(id)
				return flag == -1
			},
			// 发送评论
			sendOut() {
				var text = this.textValue
				if (this.isAct === 0) {
					uni.$http.post(`//ym_server/comments`, {
						"targetId": this.id, //物品id
						"content": text, //插入内容
						"parentId": "0", //如果是零就是一级评论 其他的就是二级评论
						"link": "a" //图片链接
					}).then((res) => {
						// console.log(res.data)
						this.queryReplyContent()
						this.textValue = ''
						uni.showToast({
							title: '评论成功',
							// icon: 'none',
							duration: 1000
						});
					})
				} else {
					uni.$http.post(`//ym_server/comments`, {
						"targetId": this.id, //物品id
						"content": text, //插入内容
						"parentId": this.commentId, //如果是零就是一级评论 其他的就是二级评论
						"link": "a" //图片链接
					}).then((res) => {
						this.queryReplyContent()
						this.textValue = ''
						uni.showToast({
							title: '评论成功',
							// icon: 'none',
							duration: 1000
						});
					})
					this.isAct = 0
				}

			},
			// 点击一级评论调起键盘
			send() {
				this.showInput = true
			},
			// 点击一级评论 获取name和id
			replyComments(aid, name) {
				this.isAct = 1
				this.commentId = aid
				this.$nextTick(() => {
					this.showInput = true
					this.mess = `回复:${name}`
				})
			},
			blur() {
				this.showInput = false
				this.mess = '留言咨询卖家吧~'
			},
			// 长按删除评论
			onLongPress(e) {
				console.log("当前评论id是：" + e)
				var app = this
				uni.showModal({
					title: '提示',
					content: '是否删除该评论',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.$http.delete(`//ym_server/comments?commentId=${e}`).then((res) => {
								app.queryReplyContent()
								uni.showToast({
									title: '删除成功',
									duration: 1000
								});
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
							return
						}
					}
				});
			},
			// 评论点赞
			async likeReply(cid, idx) {
				const {
					data: res
				} = await uni.$http.put(`/ym_server/comments-like?id=${cid}`)
				console.log(res.data)
				this.replyContent[idx].likeNum + 1;
				this.queryReplyContent()
			}

		}
	}
</script>

<style lang="scss" scoped>
	.loadingbox {
		width: 100%;
		display: flex;
		text-align: center;

		.loading {
			margin: 100upx auto;
		}
	}

	.body {
		background-color: #ffffff;
		height: 100vh;
	}

	.returnBox {
		position: sticky;
		background-color: #ffffff;
		padding-bottom: 40upx;
		z-index: 999;
		top: 0px;
		left: 0px
	}

	.box_input {
		width: 100%;
		height: 120upx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		z-index: 999;

		.box_input_input {
			border: #3FD3D1 3px solid;
			border-radius: 50upx;
			height: 72upx;
			font-size: 14px;
			flex: 7;
			padding: 0 20upx;
			margin: 0 28upx 0 50upx;

			input {
				height: 72upx;
				line-height: 72upx;
			}
		}

		.box_input_button {

			text-align: center;

			.box_input_button_txt {
				flex: 4;
				width: 200upx;
				height: 72upx;
				line-height: 72upx;
				border-radius: 92upx;
				background-color: #3FD3D1;
				color: #FFFFFF;
				font-size: 28upx;
				margin: 0upx 44upx 0 0;
			}

			.box_input_button_text {
				flex: 2;
				width: 80upx;
				height: 80upx;
				background-color: #3FD3D1;
				color: #FFFFFF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				margin-right: 30upx;
			}
		}
	}

	.user_title {
		padding-top: 20upx;
		display: flex;
		padding: 20upx 34upx;
		align-items: center;
		justify-content: space-between;

		.user_title_box {
			display: flex;
			align-items: center;
		}

		.user_title_img image {
			width: 88upx;
			height: 88upx;
			border-radius: 50%;
			margin-right: 12upx;
		}

		.user_title_text {
			margin-left: 8upx;

			.user_title_name {
				font-size: 28upx;
				font-weight: 500;
			}

			.user_title_time {
				font-size: 24upx;
				color: #7A7A7A
			}
		}


		.user_title_follow {
			width: 124upx;
			height: 52upx;
			background-color: #3FD3D1;
			border-radius: 56upx;
			font-size: 28upx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.user_title_followTwo {
			width: 124upx;
			height: 52upx;
			background-color: #C0C0C0;
			border-radius: 56upx;
			font-size: 28upx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	swiper {
		width: 680upx;
		height: 818upx;
		border-radius: 38upx;
		margin: 24upx 34upx;

		.swiper_image {
			width: 680upx;
			height: 818upx;
			border-radius: 38upx;
			padding: 0 10upx;
		}
	}

	.text_box {
		border-bottom: #3FD3D1 solid 2upx;
		width: 680upx;
		margin: 24upx 34upx;

		.text_box_title {
			font-size: 32upx;
			font-weight: 500;
			height: 78upx;
			line-height: 78upx;
		}

		.text_box_content {
			font-size: 28upx;
			line-height: 40upx;
			margin: 0 0 20upx 0;
		}

		.text_box_price {
			width: 100%;
			height: 70upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10upx;

			.text_box_price_box {
				display: flex;
			}

			.text_box_price_label {
				width: 64upx;
				height: 34upx;
				border-radius: 144upx;
				border: solid #3fd3d1 2upx;
				color: #3fd3d1;
				text-align: center;
				line-height: 34upx;
				font-size: 20upx;
				font-weight: 400;
				margin-right: 12upx;
			}

			.text_price {
				color: #FF756A;
				font-size: 36upx;
			}
		}
	}

	.reply {
		margin-top: 20rpx;
		margin-bottom: 100upx;
		background-color: #ffffff;
		padding: 20px;

		.reply_title {
			font-size: 30upx;
			font-weight: 500;
			margin: 6upx 0 26upx 0;
		}

		.reply_data {
			display: flex;

			.reply_data_head {
				image {
					width: 70upx;
					height: 70upx;
					border-radius: 50%;
					margin-right: 12px;
					margin-top: 0upx;
					margin-bottom: 10upx;
				}
			}

			.right_box {
				display: flex;
				flex-direction: column;
				width: 86%;
			}

			.reply_data_id {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.reply_data_name {
					font-size: 28upx;

					.reply_data_name_text {
						display: flex;
						align-items: center;
						font-size: 28upx;

						.message {
							width: 68upx;
							height: 32upx;
							line-height: 32upx;
							text-align: center;
							background-color: #3FD3D1;
							color: #fff;
							font-size: 24upx;
							margin-left: 10upx;
							border-radius: 6upx;
						}
					}

					.fans {
						color: #7A7A7A;
						font-size: 20upx;
					}
				}

				.fabulous {
					display: flex;
					align-items: center;

					image {
						width: 32upx;
						height: 32upx;
						margin: auto;
					}

					text {
						margin-left: 10upx;
						color: #7A7A7A;
						font-size: 28upx;
						min-width: 46upx;
					}
				}
			}

			.reply_text {
				margin-top: 20upx;
				width: 100%;
				font-size: 28upx;
				color: #666;

				.reply_text_over {
					color: #3FD3D1;
					padding: 0 10upx;
				}
			}

			.reply_text_time {
				width: 100%;
				margin-bottom: 8upx;
				height: 42upx;
				line-height: 42upx;

				text:nth-child(1) {
					font-size: 28upx;
					color: #ccc;
					margin-right: 20upx;
				}

				text:nth-child(2) {
					font-size: 28upx;
				}
			}

			image {
				width: 80%;
				margin-top: 20rpx;
				border-radius: 30rpx;
			}

		}

		.reply_hidden {
			width: 100%;
			height: 70upx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			color: #666;
			font-size: 26upx;
			margin-left: 80upx;

			image {
				width: 38upx;
				height: 38upx;
				margin: 0 8upx;
			}
		}

		.data_chi {
			margin-left: 90upx;
		}

		.dibu {
			width: 100%;
			height: 130upx;
			line-height: 130upx;
			text-align: center;
			font-size: 28upx;
			color: #CCCCCC;
		}
	}
</style>
